<template>
    <div class="html">
        <div class="login-container">
            <button @click="$router.push('/loginView')" class="back-to-login-btn">
                返回登录
            </button>
            <div class="login-form">
                <div style="margin: 0 auto;width: 300px;">
                    <h4 style="text-align: center; margin-bottom: 30px;color: #ffffff">修改密码</h4>
                    <div class="content">
                        <div>
                            <label for="phoneEmail" class="form-label">手机号/邮箱:</label>
                            <el-input v-model="phoneEmail" placeholder="请输入手机或邮箱" clearable></el-input>
                            <label for="password" class="form-label">新密码:</label>
                            <el-input v-model="password" placeholder="请输入新密码" type="password" show-password></el-input>
                            <label for="code" class="form-label">验证码:</label>
                            <div class="code-input-group">
                                <el-input v-model="code" placeholder="请输入验证码" clearable></el-input>
                                <button class="btn btn-outline-secondary verify-code-btn" @click="getCode"
                                    :disabled="countdown > 0">
                                    {{ countdown > 0 ? `${countdown}s后重新获取` : '获取验证码' }}
                                </button>
                            </div>
                        </div>

                        <div
                            style="margin-top: 15px;font-size: 11px;display: flex;justify-content: center;align-items: center;">
                            <input type="checkbox" id="is_check" v-model="isAgreed" class="agreement-checkbox">
                            <div style="margin-top: -2px;">我已阅读并同意 <a href="http://baidu.com">《用户服务协议》</a>和<a
                                    href="http://baidu.com">《隐私政策》</a></div>
                        </div>
                        <button class="btn btn-outline-light" style="margin-top: 15px;width: 150px;float: right;"
                            :disabled="loginDisabled" :class="{ 'cursor-not-allowed': loginDisabled }"
                            @click="loginUsrLogin">确认修改</button>
                    </div>
                </div>
            </div>
        </div>

        <div id="errorDialog">
            <div id="closeButton01" class="close_morn">X</div>
            <span id="errorMsg"></span>
            <br>
            <button id="closeButton" class="btn btn-group-vertical">关闭</button>
        </div>
    </div>
</template>
<script>
export default {
    name: 'ForgetPwdPage',
    data() {
        return {
            phoneEmail: '',
            code: '',
            password: '',
            countdown: 0,
            isAgreed: false
        }
    },
    computed: {
        loginDisabled() {
            if (!this.isAgreed) return true;

            return !this.phoneEmail.trim() ||
                !this.nickname.trim() ||
                !this.password.trim() ||
                !this.code.trim();
        }
    },
    methods: {
        // 获取验证码
        getCode() {
            if (!this.phoneEmail) {
                alert('请输入手机或邮箱');
                return;
            }

            // 模拟发送验证码
            console.log('发送验证码到:', this.phoneEmail);

            // 开始倒计时
            this.countdown = 60;
            const timer = setInterval(() => {
                this.countdown--;
                if (this.countdown <= 0) {
                    clearInterval(timer);
                }
            }, 1000);
        },
        // 登录
        loginUsrLogin() {
            console.log('注册信息:', {
                phoneEmail: this.phoneEmail,
                nickname: this.nickname,
                password: this.password,
                code: this.code
            });
        }
    }
}
</script>
<style scoped src="@/assets/demo.css"></style>
<style scoped src="@/assets/bootstrap.css"></style>
<style lang="scss" scoped>
.html{
  background-image: url('@/assets/sponge.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 100vh;
}
.back-to-login-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    background-color: #f5f7fa;
    color: #409eff;
    margin: 0px 0 20px;
    transition: all 0.2s ease;
}

.back-to-login-btn:hover {
    background-color: #e6f7ff;
    color: #1890ff;
    transform: translateY(-1px);
}

.back-to-login-btn:active {
    transform: translateY(0);
}

.content {
    margin: 0 auto;
    width: 300px;
}

.code-input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.code-input-group .el-input {
    flex: 1;
}

.register {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    color: #007bff;
    margin-top: 15px;
}

.form-label {
    display: block;
    margin-bottom: 5px;
}

::v-deep .el-input {
    margin-bottom: 15px;
}

.verify-code-btn {
    height: 32px;
    font-size: 12px;
    padding: 0 8px;
    margin-top: -16px;
}

.agreement-checkbox {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: #17a2b8; // 勾选颜色与按钮主题色统一
}

.cursor-not-allowed {
    cursor: not-allowed !important;
}
</style>
